<template>
  <div class="moveList">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="goToDetail(item.movieid)"
      >
        <div class="left">
          <img :src="item.img | formatImg" alt="" />
        </div>
        <div class="right">
          <h1>
            {{ item.nm }}
            <i v-if="item.version" class="ver1">{{
              item.version | formatVer1
            }}</i
            ><i v-if="item.version.includes(' ')" class="ver2">{{
              item.version | formatVer2
            }}</i>
          </h1>
          <p v-if="item.sc">
            观众评分<b>{{ item.sc }}</b>
          </p>
          <p v-else>
            <b>{{ item.wish }}</b
            >人想看
          </p>
          <p>主演：{{ item.star }}</p>
          <p>{{ item.showInfo }}</p>
          <span v-if="item.showst === 3">购票</span>
          <span v-else :class="{ show }">预售</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getMovieApi, getMovieMoreApi } from "@/utils/api";
export default {
  props: ["num"],
  watch: {
    num() {
      this.fn();
    },
  },
  data() {
    return {
      list: [],
      // 所有电影的id的集合
      ids: [],
      // 电影的总条数
      count: 0,
      // 从第几条开始
      startIndex: 0,
      // 每次获取的条数
      size: 6,
      show: true,
      version: true,
    };
  },
  mounted() {
    this.listData();
  },
  methods: {
    async listData() {
      const res = await getMovieApi();
      if (res.status === 0) {
        const { result, ids, count } = res;
        this.list = result;
        this.ids = ids;
        this.count = count;
        this.startIndex = result.length;
        await this.$nextTick();
        this.$emit("finish-get");
      }
    },
    async fn() {
      // 请求上拉加载更多的数据
      const newIds = this.ids.slice(
        this.startIndex,
        this.startIndex + this.size
      );
      // console.log(newIds);
      const str = newIds.join(",");

      const res = await getMovieMoreApi({
        ids: str,
      });
      if (res.status === 0) {
        this.list = this.list.concat(res.result);
        this.startIndex += this.size;
        await this.$nextTick();
        this.$emit("finish", this.list.length >= this.count);
      }

      // fetch("http://www.pudge.wang:3080/api/movies/more", {
      //   body: JSON.stringify({
      //     ids: str,
      //   }),
      //   headers: {
      //     "content-type": "application/json",
      //   },
      //   method: "POST",
      // })
      //   .then((response) => response.json())
      //   .then(async (res) => {
      //     if (res.status === 0) {
      //       this.list = this.list.concat(res.result);
      //       this.startIndex += this.size;
      //       await this.$nextTick();
      //       this.$emit("finish", this.list.length >= this.count);
      //     }
      //   });
    },
    // 跳转到详情页
    goToDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
  filters: {
    formatImg(val) {
      return val.split("w.h").join("64.90");
    },
    formatVer1(val) {
      return val.toUpperCase().substring(1).split(" ")[0];
    },
    formatVer2(val) {
      return val.toUpperCase().substring(val.indexOf("i"));
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/var.less";
.moveList {
  width: 100%;
  padding: 0 15px;
  background: #fff;
  font-size: @xs-font;

  li {
    display: flex;
    .left {
      margin: 12px 12px 12px 0;
    }
    .right {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 12px 0;
      border-bottom: @border-color;
      h1 {
        font-size: @m-font;
        margin-bottom: 6px;
        line-height: 22px;
        .ver1 {
          font-size: @xxs-font;
          color: #fff;
          background: #3c9fe6;
          padding: 1px 3px;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
          font-weight: 500;
        }
        .ver2 {
          font-size: @xxs-font;
          color: #3c9fe6;
          border: 1px solid #3c9fe6;
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
          font-weight: 500;
          padding: 0 2px;
        }
      }
      p {
        line-height: 18px;
        width: 220px;
        .ellipsis();
      }
      b {
        font-size: @s-font;
        color: @theme-color;
      }
      span {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        background: @theme-color;
        padding: 6px 12px;
        border-radius: 5px;
      }
      .show {
        background: #3c9fe6;
      }
    }
  }
}
</style>
